<template>
  <section id="header">

      <logo />

      <div id="navigation">
        <NuxtLink class="navigation-item" to="/">{{ $t('navigation.home') }}</NuxtLink>
        <NuxtLink class="navigation-item" to="/about?id=abc">{{ $t('navigation.about') }}</NuxtLink>
        <NuxtLink class="navigation-item" to="/news">{{ $t('navigation.news') }}</NuxtLink>
        <NuxtLink class="navigation-item" to="/products">{{ $t('navigation.products') }}</NuxtLink>
        <NuxtLink class="navigation-item" to="/services">{{ $t('navigation.services') }}</NuxtLink>
      </div>

      <div id="language-selector">
        <ElButton type="primary" @click="switchLanguage(item.code)" v-for="item in availableLocales" :key="item.code">{{item.name}}</ElButton>
      </div>
      <!-- <div>{{ availableLocales }}</div>
      <hr>
      <div>{{ locales }}</div> -->
  </section>
</template>

<script setup>
import { ref, onMounted } from 'vue';

import { ElHeader, ElMain, ElFooter, ElButton } from 'element-plus';
import { NavBar, Tabbar, TabbarItem, Button as VanButton } from 'vant';
import { updateLayout } from '../utils/layoutUtils';

const { locale, locales, t, setLocale } = useI18n();
import logo from './logo.vue'
const switchLanguage = (lang) => {
  localStorage.setItem('user-locale', lang);
  setLocale(lang)
};
const localeName = ref("");
const availableLocales = computed(() => {
  if (locales.value && locale.value) {
    localeName.value = locales.value.find(i => i.code === locale.value)?.name ?? "";
    return locales.value.filter(i => i.code !== locale.value);
  }
  return [];
});

const initLocale = () => {
  // 从 localStorage 中读取用户之前选择的语言
  const savedLocale = localStorage.getItem('user-locale');
  if (savedLocale) {
    setLocale(savedLocale);
  } else {
    let userlocale = 'en'
    // setLocale(userlocale);
    // 根据浏览器语言自动选择
    const browserLang = navigator.language || navigator.userLanguage;
    if (browserLang.startsWith('zh')) {
      if (browserLang.includes('HK') || browserLang.includes('TW')) {
        setLocale('zh-HK');
        userlocale = 'zh-HK'
      } else {
        setLocale('zh-CN');
        userlocale = 'zh-CN'
      }
    } else {
      setLocale('en');
    }
    // localStorage.setItem('user-locale', userlocale);
  }
}

const isPC = ref(false);
const isIPad = ref(false);

onMounted(() => {
  updateLayout(isPC, isIPad);
  window.addEventListener('resize', () => updateLayout(isPC, isIPad));

  initLocale()
});

</script>

<style lang="scss" scoped>
#header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.logo{
  display: flex;
  // flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  .logo-svg{
    width: 110px;
    aspect-ratio: 1;
    overflow: hidden;
    background-color: #149292;
    background-size: 460%;
    background-repeat: no-repeat;
    background-image: url('../assets/landsd_logo/landsd_logo-sm_tc.svg');
  }}
  #navigation{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    .navigation-item{
      width: 110px;
      text-align: center; 
    }
  }
  #language-selector{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .el-button{
      width: 80px;
      margin: 5px;
    }
  }

.pc-layout {
  height: 300px;
  background-color: #927d14;
}

.ipad-layout, .mobile-layout {
  height: 300px;
  background-color: #2d90a6;
}

@media (min-width: 1024px) {
  .pc-layout {
    display: block;
  }
  .ipad-layout, .mobile-layout {
    display: none;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .ipad-layout {
    display: block;
  }
  .pc-layout, .mobile-layout {
    display: none;
  }
}

@media (max-width: 767px) {
  .mobile-layout {
    display: block;
  }
  .pc-layout, .ipad-layout {
    display: none;
  }
}
</style>